<template>
  <div class="userManagement">
    <div>
      <el-form :inline="true" :model="form" class="form">
        <el-form-item>
          <el-input
            prefix-icon="el-icon-search"
            v-model="form.query"
            placeholder="请输入要搜索的订单编号"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="onSearch()">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <div class="typeUsers">
        <el-tabs v-model="activeName" >
          <el-tab-pane label="订单管理" name="first">
            <div>
              <el-table :data="orderData" style="width: 100%">
                <el-table-column prop="orderId" width="180" label="订单编号"></el-table-column>
                <el-table-column prop="orderTime" label="订单创建时间"></el-table-column>
                <el-table-column prop="orderName" label="订单名称"></el-table-column>
                <el-table-column prop="oederContent" label="订单内容"></el-table-column>
                <el-table-column prop="orderPrice" label="订单金额"></el-table-column>
                <el-table-column prop="orderAddress" label="收货地址"></el-table-column>
                <el-table-column prop="orderPhone" label="联系电话" width="140"></el-table-column>
                <el-table-column label="操 作" width="160">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                      class="btnNot"
                    >编辑</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
             <el-dialog title="订单编辑" width="40%" :visible.sync="updatedialog">
              <el-form ref="form" :model="updateForm" label-width="90px">
                <el-form-item label="订单名称">
                  <el-input v-model="updateForm.orderName" clearable></el-input>
                </el-form-item>
                <el-form-item label="订单内容">
                  <el-input v-model="updateForm.oederContent" clearable></el-input>
                </el-form-item>
                <el-form-item label="订单金额">
                  <el-input v-model="updateForm.orderPrice" clearable></el-input>
                </el-form-item>
                <el-form-item label="收货地址">
                  <el-input v-model="updateForm.orderAddress" clearable></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                  <el-input v-model="updateForm.orderPhone" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <div style="float:right;">
                    <el-button @click="btnNot()" class="btnNot">取 消</el-button>
                    <el-button type="warning" @click="updateOrder()">确 认</el-button>
                  </div>
                </el-form-item>
              </el-form>
            </el-dialog>
            <div style="margin-top:20px;">
              <el-pagination
                :current-page="currentOrderPage"
                @current-change="handleCurrentOrderChange"
                background
                layout="prev, pager, next"
                :total="orderTotal"
              ></el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      orderTotal: 0,
      currentOrderPage: 1,
      updatedialog:false,
      activeName: "first",
      form: {
        query: ""
      },
      orderData: [
      ],
      updateForm:{

      }
    };
  },
  methods: {
     handleCurrentOrderChange(val) {
      let that = this;
      that.currentOrderPage = val;
      that.orderDataGet();
    },
    onSearch(){
      let that = this;
      let orderId = that.form.query;
      let orderData=[];
      if(orderId){
      that.$axios
        .post("/order/queryOrderInfoByOrderId?orderId=" + orderId, {})
        .then(function(response) {
          console.log(response);
          that.orderTotal = 1;
          orderData.push(response.data.data)//将后台返回的对象转换成数组
          that.orderData = orderData;
          
        }).catch(function(error) {
          console.log(error);
        });
        }else{
          that.orderDataGet();
        }
    },
    handleEdit(index, row) {
       let that = this;
       console.log(row);
       that.updateForm=row
       that.updatedialog=true;

    },
    updateOrder(){
      let that = this;
      that.$axios.post("/order/orderUpdate", {
        orderId: that.updateForm.orderId,
        userId: that.updateForm.userId,
        shoesId: that.updateForm.shoesId,
        oederContent: that.updateForm.oederContent,
        orderAddress: that.updateForm.orderAddress,
        orderName: that.updateForm.orderName,
        orderPhone: that.updateForm.orderPhone,
        orderPrice: that.updateForm.orderPrice,
        orderShoesImage: that.updateForm.orderShoesImage,
      }).then(function(response) {
        alert("编辑成功！");
        that.updatedialog=false;
        that.orderDataGet();
      }).catch(function(error) {
          console.log(error);
        });
    },
   
    handleDelete(index, row) {
      let that = this;
      console.log(index, row);
      that.deleteOrder(row);
    },

    deleteOrder(row){
      let that = this;
      that.$axios
        .post("/order/orderDelete?orderId=" + row.orderId, {})
        .then(function(response) {
          console.log(response);
          that.$message.error("删除成功！")
           that.orderDataGet();
        }).catch(function(error) {
          console.log(error);
        });
    },
    orderDataGet() {
      let that = this;
      let page = that.currentOrderPage;
      that.$axios
        .post("/order/queryAllOrdersInfo?page=" + page, {})
        .then(function(response) {
          console.log(response);
          that.orderTotal = response.data.data.records;
          that.orderData = response.data.data.rows;
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  created() {
    let that = this;
    that.orderDataGet();
  }
};
</script>
<style scoped>
.userManagement .input {
  width: 600px;
}
.userManagement >>> .el-tabs__active-bar {
  background-color: #e6a23c;
}
.userManagement >>> .el-tabs__item.is-active {
  color: #e6a23c;
}
.userManagement >>> .el-tabs__item:hover {
  color: #e6a23c;
}
.userManagement .btnNot:hover {
  color: #e6a23c;
  border-color: #e6a23c;
  background-color: #faf3e8;
}
.userManagement >>> .el-pager li:not(.disabled).active {
  background-color: #e6a23c;
}
</style>